<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML5: ToDo Application Using Local Storage</title>
    <link type="text/css" href="css/styletodo1.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/bwH5LS.js"></script>
    <script type="text/javascript" src="js/checkuser.js"></script>

    <script type="text/javascript">
        $(function () {
            if (!supports_html5_storage) {
                $('#content').html('Please choose a browser that supportes HTML5 LocalStorage!');
                return false;
            }
            
            $("form").submit(function (e) {
                e.preventDefault();
                if ($("input[type=text]").val() === null || $("input[type=text]").val() == "") {
                    return false;
                }
                try {
                    var seq = new Date().getTime();
                    localStorage.setItem(seq, $("input[type=text]").val());
                    createNode(seq, $("input[type=text]").val());
                } catch (e) {
                    if (e == QUOTA_EXCEEDED_ERR) {
                        alert('Quota exceeded!');
                    }
                }
            });

            setupTODOS();
        });
    </script>

        <script type="text/javascript">
            function supports_html5_storage() {
                try {
                    return 'localStorage' in window && window['localStorage'] !== null;
                } catch (e) {
                    return false;
                }
            }
            function clearAll() {
                localStorage.clear();
                $("ul").html("");
                return false;
            }
            function setupTODOS() {
                var i = 0;
                var k;
                if (localStorage.length) {
                    for (i = localStorage.length - 1; i >= 0; i--) {
                        k = localStorage.key(i);
						if(k!=null ** k != 'null')
                        createNode(k, localStorage.getItem(k));
                    }
                }

                if (window.addEventListener)
                    addEventListener('storage', storage_event, false);
                else if (window.attachEvent)
                    document.attachEvent('onstorage', storage_event);
            }

            function storage_event(e) {
                if (localStorage.length == 0)
                    $("ul").html("");

                else if (e.oldValue === null && e.key !== null && e.newValue !== null) {
                    createNode(e.key, e.newValue);
                }
                else if (e.oldValue != null && e.key !== null && e.newValue !== null) {
                    $("li[id='" + e.key + "']").children("div:eq(0)").children("span").text(e.newValue);
                    $("li[id='" + e.key + "']").children("div:eq(1)").children("input").val(e.newValue);
                }
                else
                    $("li[id='" + e.key + "']").remove();
            }
            function createNode(k, value) {
                $("<img src='images/done.png' class='todo_action' width='25px' height='25px' title='Done!' />")
                    .appendTo($("<div><span>" + value + "</span></div>")
                    .appendTo($("<li id='" + k + "'></li>").hide().css('opacity', 0.0).prependTo("ul").animate({ opacity: 1.0 }, 600, function () { }).slideDown(800))
                        .dblclick(function (e) {
                            $(this).css('display', 'none');
                            if ($(this).parent().children("div:eq(1)").length > 0) {
                                $(this).parent().children("div:eq(0)").css("display", "none");
                                $(this).parent().children("div:eq(1)").css("display", "block");
                            }
                            else {
                                $("<img src='images/cancel.png' class='todo_action' width='25px' height='25px' title='Cancel' />")
                                .appendTo($("<img src='images/save.png' class='todo_action' width='25px' height='25px' title='Save' />")
                                    .appendTo($("<div><input type=text value='" + $(this).children("span").text() + "'/></div>").appendTo($(this).parent()))
                                    .click(function (e) {
                                        try {
                                            var seq = $(this).parent().parent().attr("id");
                                            localStorage.setItem(seq, $(this).parent().children("input[type=text]").val());
                                            $(this).parent().parent().children("div:eq(0)").children("span").text($(this).parent().children("input[type=text]").val());
                                            $(this).parent().parent().children("div:eq(0)").css("display", "block");
                                            $(this).parent().parent().children("div:eq(1)").css("display", "none");
                                        } catch (e) {
                                            if (e == QUOTA_EXCEEDED_ERR) {
                                                alert('Quota exceeded!');
                                            }
                                        }
                                    }).parent())
                                    .click(function (e) {
                                        $(this).parent().children("input[type=text]").val($(this).parent().parent().children("div:eq(0)").children("span").text());
                                        $(this).parent().parent().children("div:eq(0)").css("display", "block");
                                        $(this).parent().parent().children("div:eq(1)").css("display", "none");
                                    });
                            }

                        })).click(function (e) {
                            var seq = $(this).parent().parent().attr("id");
                            localStorage.removeItem(seq);
                            $(this).parent().parent().animate({
                                opacity: 0.25,
                                left: '+=50',
                                height: 'toggle'
                            }, 1000, function () { $(this).remove(); });
                        });
            }
    </script>
</head>
<body>
    <form id="form1">
        <div id="content" class="todo">
            <h1>
                HTML5: ToDo Application Using Local Storage
            </h1>
            <div>
                Add New ToDo Item: <input type="text"/> <input type="submit" value="Add" />
            </div>
            <ul style="overflow:hidden; height:auto">
            </ul>
            <div>Double Click ToDo Item to Edit or <a href="javascript:void(0);" onclick="clearAll();">Clear all!</a></div>
        </div>
        <div class="copyright">This demo was created as part of the <a rel="Bookmark" title="HTML5: ToDo Application Using Local Storage" href="http://fadihania.com/2011/07/html5-todo-application-using-local-storage/">HTML5: ToDo Application Using Local Storage Tutorial</a>, All Copyrights &copy; reserved for <a rel="Bookmark" title="Fadi Hania Blog" href="http://fadihania.com">Fadi Hania Blog</a></div>
    </form>
</body>
</html>
